import React from "react";
import {
  BrowserRouter as Router,
  Routes,
  Route,
  Navigate,
} from "react-router-dom";
import "./App.scss";

import Home from "./views/home/index";
import HomeList from "./views/home/children/List";
import HomeDetail from "./views/home/children/Detail";

import Target from "./views/target/index";
import My from "./views/my/index";
import Login from "./views/login/index";
import Love from "./views/love/index";
import Browse from "./views/browse/index";
import Demo from "./views/demo/index";
import Demo2 from "./views/demo2/index";
import Discover from "./views/discover/index";
import Order from "./views/order/index";
import OrderList from "./views/order/children/List";
import OrderDetail from "./views/order/children/Detail";

function App() {
  return (
    <div className="app">
      <Router>
        <Routes> 
          <Route path="/" element={<Navigate to="/home" />} />
          <Route path="/home" element={<Home />}> 
            {/* <Route path="list" element={<HomeList />} /> */}
            {/* 访问/home时,显示列表 */}
            <Route index element={<HomeList />} />
            <Route path="detail" element={<HomeDetail />} />
          </Route>
          <Route path="/target" element={<Target />} />
          <Route path="/my" element={<My />} />
          <Route path="/login" element={<Login />} />
          <Route path="/love" element={<Love />} />
          <Route path="/browse" element={<Browse />} />
          <Route path="/home" element={<Home />} />
          <Route path="/discover" element={<Discover />} />
          <Route path="/demo" element={<Demo />} />
          <Route path="/demo2/:id" element={<Demo2 />} />
          <Route path="/order" element={<Order />}>
            {/* 子路由配置 */}
            <Route path="list" element={<OrderList />} />
            <Route path="detail" element={<OrderDetail />} />
          </Route>  
        </Routes>
      </Router>
    </div>
  );
}
export default App;
